<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>创建任务</span>
            </div>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入任务标题"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input type="textarea" :rows="3" v-model="form.description" placeholder="请输入任务描述"></el-input>
              </el-form-item>
              <el-form-item label="负责人" prop="assignee">
                <el-select
                  v-model="form.assignee"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="remoteMethod"
                  :loading="loading">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="截止日期" prop="dueDate">
                <el-date-picker
                  v-model="form.dueDate"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="优先级" prop="priority">
                <el-select v-model="form.priority" placeholder="请选择">
                  <el-option label="低" value="low"></el-option>
                  <el-option label="中" value="medium"></el-option>
                  <el-option label="高" value="high"></el-option>
                  <el-option label="紧急" value="urgent"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">创建</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>任务看板</span>
            </div>
            <el-tabs v-model="activeTab" @tab-click="handleTabClick">
              <el-tab-pane label="我的任务" name="my">
                <el-table
                  :data="myTasks"
                  style="width: 100%">
                  <el-table-column
                    prop="title"
                    label="标题"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="description"
                    label="描述"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="dueDate"
                    label="截止日期"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="priority"
                    label="优先级"
                    width="100">
                    <template slot-scope="scope">
                      <el-tag :type="getPriorityType(scope.row.priority)">{{ scope.row.priority }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="status"
                    label="状态"
                    width="100">
                    <template slot-scope="scope">
                      <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">编辑</el-button>
                      <el-button
                        size="mini"
                        type="success"
                        @click="handleComplete(scope.row)"
                        v-if="scope.row.status !== '已完成'">完成</el-button>
                      <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="分配给我的" name="assigned">
                <el-table
                  :data="assignedTasks"
                  style="width: 100%">
                  <el-table-column
                    prop="title"
                    label="标题"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="description"
                    label="描述"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="creator"
                    label="创建者"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="dueDate"
                    label="截止日期"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="priority"
                    label="优先级"
                    width="100">
                    <template slot-scope="scope">
                      <el-tag :type="getPriorityType(scope.row.priority)">{{ scope.row.priority }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="status"
                    label="状态"
                    width="100">
                    <template slot-scope="scope">
                      <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="success"
                        @click="handleComplete(scope.row)"
                        v-if="scope.row.status !== '已完成'">完成</el-button>
                      <el-button
                        size="mini"
                        type="warning"
                        @click="handleReject(scope.row)"
                        v-if="scope.row.status !== '已拒绝' && scope.row.status !== '已完成'">拒绝</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  export default {
    name: 'TaskManagement',
    data() {
      return {
        form: {
          title: '',
          description: '',
          assignee: '',
          dueDate: '',
          priority: 'medium'
        },
        rules: {
          title: [
            { required: true, message: '请输入任务标题', trigger: 'blur' },
            { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
          ],
          assignee: [
            { required: true, message: '请选择负责人', trigger: 'change' }
          ],
          dueDate: [
            { required: true, message: '请选择截止日期', trigger: 'change' }
          ],
          priority: [
            { required: true, message: '请选择优先级', trigger: 'change' }
          ]
        },
        options: [],
        loading: false,
        activeTab: 'my',
        myTasks: [
          {
            id: 1,
            title: '完成项目方案',
            description: '编写项目实施方案',
            dueDate: '2023-01-15',
            priority: '高',
            status: '进行中'
          },
          {
            id: 2,
            title: '客户需求分析',
            description: '分析客户需求并整理文档',
            dueDate: '2023-01-10',
            priority: '中',
            status: '已完成'
          },
          {
            id: 3,
            title: '准备周会材料',
            description: '准备周会汇报材料',
            dueDate: '2023-01-08',
            priority: '低',
            status: '未开始'
          }
        ],
        assignedTasks: [
          {
            id: 4,
            title: '市场调研报告',
            description: '完成市场调研报告',
            creator: '张三',
            dueDate: '2023-01-20',
            priority: '中',
            status: '未开始'
          },
          {
            id: 5,
            title: '产品设计评审',
            description: '参与产品设计评审会议',
            creator: '李四',
            dueDate: '2023-01-12',
            priority: '高',
            status: '进行中'
          },
          {
            id: 6,
            title: '代码审核',
            description: '审核新功能代码',
            creator: '王五',
            dueDate: '2023-01-09',
            priority: '紧急',
            status: '已拒绝'
          }
        ]
      }
    },
    created() {
      this.getUsers()
    },
    methods: {
      getUsers() {
        // 模拟获取用户列表
        this.options = [
          { value: '1', label: '张三 (研发部)' },
          { value: '2', label: '李四 (市场部)' },
          { value: '3', label: '王五 (人事部)' },
          { value: '4', label: '赵六 (财务部)' },
          { value: '5', label: '钱七 (销售部)' },
          { value: '6', label: '孙八 (行政部)' }
        ]
      },
      remoteMethod(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            this.loading = false
            this.options = this.options.filter(item => {
              return item.label.toLowerCase().includes(query.toLowerCase())
            })
          }, 200)
        } else {
          this.getUsers()
        }
      },
      getPriorityType(priority) {
        const map = {
          '低': 'info',
          '中': '',
          '高': 'warning',
          '紧急': 'danger'
        }
        return map[priority]
      },
      getStatusType(status) {
        const map = {
          '未开始': 'info',
          '进行中': 'warning',
          '已完成': 'success',
          '已拒绝': 'danger'
        }
        return map[status]
      },
      handleTabClick(tab) {
        console.log(tab.name)
      },
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$message({
              message: '创建成功',
              type: 'success'
            })
            // 实际项目中应该调用API
            // createTask(this.form).then(() => {
            //   this.$message({
            //     message: '创建成功',
            //     type: 'success'
            //   })
            //   this.resetForm()
            //   this.getTasks()
            // })
          } else {
            return false
          }
        })
      },
      resetForm() {
        this.$refs.form.resetFields()
      },
      handleEdit(row) {
        console.log('编辑任务', row)
        // 实际项目中应该打开编辑对话框或跳转到编辑页面
      },
      handleComplete(row) {
        this.$confirm('确认完成该任务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          // 模拟完成操作
          this.$message({
            type: 'success',
            message: '任务已完成!'
          })
          // 更新状态
          if (this.activeTab === 'my') {
            const index = this.myTasks.findIndex(item => item.id === row.id)
            if (index !== -1) {
              this.myTasks[index].status = '已完成'
            }
          } else {
            const index = this.assignedTasks.findIndex(item => item.id === row.id)
            if (index !== -1) {
              this.assignedTasks[index].status = '已完成'
            }
          }
          
          // 实际项目中应该调用API
          // completeTask(row.id).then(() => {
          //   this.$message({
          //     type: 'success',
          //     message: '任务已完成!'
          //   })
          //   this.getTasks()
          // })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      handleDelete(row) {
        this.$confirm('确认删除该任务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 模拟删除操作
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 更新列表
          const index = this.myTasks.findIndex(item => item.id === row.id)
          if (index !== -1) {
            this.myTasks.splice(index, 1)
          }
          
          // 实际项目中应该调用API
          // deleteTask(row.id).then(() => {
          //   this.$message({
          //     type: 'success',
          //     message: '删除成功!'
          //   })
          //   this.getTasks()
          // })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleReject(row) {
        this.$confirm('确认拒绝该任务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 模拟拒绝操作
          this.$message({
            type: 'success',
            message: '已拒绝该任务!'
          })
          // 更新状态
          const index = this.assignedTasks.findIndex(item => item.id === row.id)
          if (index !== -1) {
            this.assignedTasks[index].status = '已拒绝'
          }
          
          // 实际项目中应该调用API
          // rejectTask(row.id).then(() => {
          //   this.$message({
          //     type: 'success',
          //     message: '已拒绝该任务!'
          //   })
          //   this.getTasks()
          // })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
    }
  }
  </script>